/*属性选择器*/
input[value] { /*是input 具有value属性*/

}

input[type=search] {

}

input[class^=icon] { /*icon开头*/
    /* ^开头  $结尾 *包含 */
}

/*结构伪类选择器*/
.a1 div:nth-child(1) { /*a1所有子类第一个div*/
    background-color: blueviolet;
}

.a1 div:nth-of-type(1) { /*a1所有div第一个div*/
    background-color: blueviolet;
}

/*伪元素选择器*/


/*计算*/
.a1 {
    width: calc(100% - 100px);
}

/*过渡*/
#a2 {
    width: 200px;
    transition: width 1s ease 0s; /*属性 花费时间 运动曲线 何时开始*/
    height: 200px;
    background-color: mediumspringgreen;
}

#a2:hover {
    width: 600px;
    /*属性 花费时间 运动曲线 何时开始*/
    transition: width 1s ease 0s; /*多属性用逗号分隔/all  */
}

/*2D转换*/
.a3 {
    width: 200px;
    height: 200px;
}

/*xy轴移动*/
#b1:hover {
    /*运动不影响其他盒子*/
    transform: translate(10px, 10px); /*xy轴移动*/
}

/*旋转*/
#b2:hover {
    /*运动不影响其他盒子*/
    transform: rotate(-45deg); /*旋转*/
    transform-origin: 100% 0; /*旋转中心点*/ /*left right top bottom*/
}

/*缩放*/
#b3:hover {
    /*运动不影响其他盒子*/
    transform: scale(0.5, 0.5); /*缩放*/
    transform-origin: 100% 0; /*缩放中心点*/ /*left right top bottom*/
}


/*动画*/
@keyframes moveRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(1000px);
    }
}

/*调用动画*/
#b4 {
    /*动画名称*/
    animation-name: moveRight;
    /*动画时间*/
    animation-duration: 1s;
    /*动画曲线*/
    animation-timing-function: ease; /*linear steps() ··· */
    /*动画延迟*/
    animation-delay: 0s;
    /*动画重复次数*/
    animation-iteration-count: 5;
    /*动画播完是否反向播放复位*/
    animation-direction: alternate;
    /*动画播完是否复位*/
    animation-fill-mode: forwards; /*backwards forwards*/
    /*动画状态*/
    animation-play-state: running;/*running paused*/
    /*animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始结束状态;*/
}

/*3D转换*/
#b5{

}
#b5:hover{
    transform: translate3d(30px,30px,30px); /*三维移动*/
}
#b6{

}
#b6:hover{
    transform: rotateX(45deg); /*三维旋转*/
}
#a7{
    perspective: 300px;  /*透视*/
    transform-style: preserve-3d; /*子元素3D空间*/
}